/**
 * 比如一个页面中，或者多个组件中都需要请求并且展示loading状态，
 * 此时我们不想要每个页面或者组件都写一遍loading，那我们可以统一管理loading，loading有两种情况:
 * 1、全局只要有一个接口还在请求中，就展示loading
 * 2、全局所有接口都不在请求中，就隐藏loading
 * 
 * 那我们怎么才能知道全局接口的请求状态呢？
 * 其实咱们可以利用Promise，
 * 只要某个接口请求Promise的状态不是pending那就说明他请求完成了，无论请求成功或者失败，
 * 既然是无论成功失败，那就会想到Promise.prototype.finally这个方法
*/

class PromiseManager {
    constructor() {
        this.pendingPromise = new Set()
        this.loading = false
    }

    generateKey() {
        return `${new Date().getTime()}-${parseInt(Math.random() * 1000)}`
    }

    push(...requestFns) {
        for (const requestFn of requestFns) {
            const key = this.generateKey()
            this.pendingPromise.add(key)
            requestFn().finally(() => {
                this.pendingPromise.delete(key)
                this.loading = this.pendingPromise.size !== 0
            })
        }
    }
}

// 模拟请求
function request(delay) {
    return () => {
        return new Promise(resolve => {
            setTimeout(() => resolve('成功喽'), delay)
        })
    }
}

const manager = new PromiseManager()

manager.push(request(1000), request(2000), request(800), request(2000), request(1500))

const timer = setInterval(() => {
    // 轮询查看loading状态
    console.log(manager.loading)
}, 300)
